<template>
  <div class="app-container">
    <div class="content">
      <div class="aside">
        <div class="tree-header">
          <span><svg-icon icon-class="type" class-name='type-class'/>&nbsp;&nbsp;药品目录</span>
        </div>
        <el-tree
          :data="tableData"
          :props="defaultProps"
          @node-click="handleXmxz"
          highlight-current:true
          check-on-click-node:true
          :expand-on-click-node="false"
          show-checkbox:true
          default-expand-all
          node-key="id"
          ref="tree"
          class="tree"
          highlight-current
          :render-content="treeRender">
					<span slot-scope="{ data }" :title="data.name">
						<span v-if="data.children != null"><i class="el-icon-folder"></i>&nbsp;&nbsp;{{
								data.name
							}}</span>
						<span v-else>{{ data.name }}</span>
					</span>
        </el-tree>
      </div>

      <el-col :span="18" class="border-left">
        <el-header height="50px" class="item-header">
          <div class="main-title">添加节点</div>
        </el-header>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="药品名称:">
            <el-input size="small" v-model=queryForm.name style="width:92%"></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <template>
              <el-select size="small" v-model="queryForm.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="saveDrugType(queryForm)">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="cleanDrugType(queryForm)">
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-main class="main">
          <el-table :data="dataList" style="width: 100%;" height="500" stripe align="center" size="small" class="empty-block">
            <el-table-column fixed="left" label="序号" width="50" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column fixed="left" prop="name" label="药品名称" width="80" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="spec" label="规格" width="100" align="center" fixed
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="剂型" width="50" align="center" fixed show-overflow-tooltip>
              <template slot-scope="scope">
                {{ dosageFilter(scope.row.dosageType) }}
              </template>
            </el-table-column>
            <el-table-column prop="manufacturer" label="生产厂家" width="150" align="center" fixed
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="standardCode" label="本位码" width="150" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="number" label="药品编码" width="150" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="药品分类" width="100" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ drugClassifyFilter(scope.row.drugType) }}
              </template>
            </el-table-column>
            <el-table-column prop="searchKey" label="检索码" width="70" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="spec" label="规格" width="100" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="category" label="所属类别" width="80" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="零售单位" width="80" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ retailFormFilter(scope.row.retailUnit) }}
              </template>
            </el-table-column>
            <el-table-column prop="retailPrice" label="零售价格" width="80" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="是否为医保药品" width="120" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ medicalInsuranceFilter(scope.row.isMedicare) }}
              </template>
            </el-table-column>
            <el-table-column label="医保类型" width="80" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ typesOfMedicalFilter(scope.row.medicareType) }}
              </template>
            </el-table-column>
            <el-table-column prop="approvalNumber" label="批准文号" width="150" align="center"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" width="80" align="center" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.status | statusFilter }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button @click="editDictionary(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteDictionary(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
            <div slot="empty"><svg-icon icon-class="no-data" class-name='no-data-class'/>
              <br><span style="font-size: 30px;">暂无数据</span></div>
          </el-table>
          <template v-if="this.totalCount">
            <el-pagination
              class="pagina"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </template>
          <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="50%">
            <el-row :gutter="15">
                <el-form :inline="true" ref="form" :model="dataForm" :rules="rules" size="medium" label-width="100px">
                  <el-col :span="12">
                    <el-form-item label="药品名称" prop="name">
                      <el-input v-model="dataForm.name" placeholder="请输入药品名称" clearable
                                :style="{width: '100%'}"></el-input>
                    </el-form-item>
                  </el-col>
                <el-col :span="12">
                  <el-form-item label="规格" prop="spec">
                    <el-input v-model="dataForm.spec" placeholder="请输入规格" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="剂型:" prop="dosageType">
                      <el-select v-model="dataForm.dosageType" placeholder="请选择剂型" clearable :style="{width: '100%'}">
                        <el-option
                          v-for="item in dosageForm"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="厂家/产地" prop="manufacturer">
                    <el-input v-model="dataForm.manufacturer" placeholder="请输入厂家/产地" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="本位码" prop="standardCode">
                      <el-input v-model="dataForm.standardCode" placeholder="请输入本位码" clearable
                                :style="{width: '100%'}"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="药品编码:"  prop="number">
                    <el-input v-model="dataForm.number" placeholder="请输入药品编码" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="药品分类:"  prop="drugType">
                    <el-select v-model="dataForm.drugType" placeholder="请选择药品分类" clearable :style="{width: '100%'}">
                        <el-option
                          v-for="item in drugClassify"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检索码:" prop="searchKey">
                     <el-input v-model="dataForm.searchKey" placeholder="请输入检索码"
                                clearable :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属类别:" class="category" prop="category">
                      <el-input v-model=dataForm.category :disabled="true" clearable :style="{width: '100%'}"></el-input>
                  </el-form-item>
                  <el-button  @click="treeType">+</el-button>
                </el-col>
                <el-col :span="12">
                <el-form-item label="零售单位:"  prop="retailUnit">
                  <el-select v-model="dataForm.retailUnit" placeholder="请选择零售单位" clearable
                             :style="{width: '100%'}">
                    <el-option
                      v-for="item in retailForm"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
                  </el-col >
                <el-col :span="12">
                  <el-form-item label="零售价格:"  prop="retailPrice">
                    <el-input v-model="dataForm.retailPrice" placeholder="请输入零售价格" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否为医保:"  prop="isMedicare">
                      <el-select v-model="dataForm.isMedicare" placeholder="请选择是否为医保" clearable
                                 :style="{width: '100%'}">
                        <el-option
                          v-for="item in medicalInsurance"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="医保类型:"  prop="medicareType">
                    <el-select v-model="dataForm.medicareType" placeholder="请选择医保类型" clearable
                               :style="{width: '100%'}">
                        <el-option
                          v-for="item in typesOfMedical"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue">
                        </el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="批准文号:" prop="approvalNumber">
                    <el-input v-model="dataForm.approvalNumber" placeholder="请输入批准文号" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否禁用" >
                      <el-switch v-model="value1"></el-switch>
                    </el-form-item>
                  </el-col>
                <el-col :span="12">
                  <el-form-item label="药品图片:" >
                    <el-upload
                      class="upload-demo"
                      ref="upload"
                      accept=".jpg, .png"
                      :action="upload.url"
                      :file-list="fileList"
                      :headers="upload.headers"
                      :show-file-list="false"
                      :on-exceed="handleExceed"
                      :on-change="handleChange"
                      :on-success="handleAvatarSuccess"
                      list-type="picture-card">
                      <img v-if="drugImg" :src="'http://127.0.0.1:8088' + drugImg" class="avatar">
                      <i v-else class="el-icon-plus"></i>
                      <!-- <el-button size="small" type="primary" :disabled="hideUploadEdit">点击上传</el-button> -->
                    </el-upload>
                  </el-form-item>
                </el-col>
                  
            </el-form>
            </el-row>
            <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="saveDrug(dataForm)">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog
            title="提示"
            :visible.sync="visibleTree"
            width="30%">
            <el-tree
              :data="tableData"
              highlight-current:true
              check-on-click-node:true
              show-checkbox:true
              default-expand-all
              node-key="id"
              ref="tree"
              highlight-current
              @node-click="handleClick"
              :props="defaultProps">
        <span slot-scope="{ data }" :title="data.name">
          <span v-if="data.children != null">
            <i class="el-icon-folder"></i>
            {{data.name }}
          </span>
         <span v-else>
            <i class="el-icon-document"></i>
            {{data.name }}
          </span>
        </span>
            </el-tree>
            <span slot="footer" class="dialog-footer">
        <el-button @click="visibleTree = false">取 消</el-button>
        <el-button type="primary" @click="visibleTree = false">确 定</el-button>
      </span>
          </el-dialog>
        </el-main>

      </el-col>

    </div>
  </div>
</template>

<script>
  import {GetDrugList, GetDrugTypeList, DeleteById, UpdateDrug,GetDrugAllByString} from "@/api/drug/drug";
  import { getToken } from '@/utils/auth'

  export default {
    data() {
      const stockValid = (rule, value, callback) => {
        if (!this.queryForm.stockUpper || !this.queryForm.stockLower) {
          return callback(new Error("必填项"));
        } else {
          callback();
        }
      };

      //自定义下拉框校验函数
      const isSelect = (rule, value, callback) => {
        if (value === '') { //如果值是 ''，提示用户选择正确的选项
          return callback(new Error("必填项"));
        } else {
          callback();
        }
      };
      var checkName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("必填项"));
        }

      };
      return {
        // 上传参数
        upload: {
          // 是否禁用上传
          // isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/common/upload",
        },
        fileList:[],
        drugImg:'',
        value1: true,
        dialogVisible: false,
        pageSize: 10,
        currentPage: 1,
        totalCount: 0,
        names: {},
        dataList: [],
        tableData: [],
        queryForm: {
          name: null,
          value: ''
        },
        dataForm: {
          name: '',
          approvalNumber: '',
          medicareType: '',
          medicalInsurance: '',
          retailPrice: '',
          retailUnit: Number,
          category: '',
          searchKey: '',
          drugType: '',
          number: '',
          standardCode: '',
          manufacturer: '',
          dosageType: '',
          spec: '',
          drugImg:''
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        options: [
          {
            value: "Enable",
            label: "启用"
          },
          {
            value: "",
            label: "全部"
          },
          {
            value: "Disable",
            label: "停用"
          }],
        value: '',
        dosageForm: [],
        drugClassify: [],
        retailForm: [],
        medicalInsurance: [],
        typesOfMedical: [],
        visibleTree: false,
        treeId:[],
        rules: {
          name: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'},
          ],
          drugType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dosageType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          searchKey: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          standardCode: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          manufacturer: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          dosageUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          approvalNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          spec: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 20, message: '最多20个字符', trigger: 'blur'}
          ],
          smallestUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          dismantleSmallestUnitNumber: [
            {required: true, message: '必填项', trigger: 'blur'},
            {min: 0, max: 11, message: '最多11个字符', trigger: 'blur'}
          ],
          nationalPrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          category: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          names: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          retailPrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          dismantlePrice: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          adultDosage: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          childDosage: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          medicationDays: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          stockUpper: [
            {required: true, message: '必填项', trigger: 'blur', validator: stockValid},
          ],
          stockLower: [
            {required: true, message: '必填项', trigger: 'blur'},
          ],
          typeVlaue: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          retailUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          smallestUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dismantleUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          dosageUnit: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          frequency: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          specialUsage: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          defaultUsage: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          baseType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          levelControl: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          specialType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          isMedicare: [
            {required: true, trigger: "change", validator: isSelect}
          ],
          medicareType: [
            {required: true, trigger: "change", validator: isSelect}
          ],
        }
      };
    },
    mounted() {
      this.getDrugTypeList();
      this.getDictByType();
      console.log(process.env.VUE_APP_BASE_API)
    },
    computed: {
      dosageFilter(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.dosageForm.length; i++) {
              if (this.dosageForm[i].dictValue === text.toString()) {
                return this.dosageForm[i].dictLabel;
              }
            }
          }
        })
      },
      dosageFilters(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.dosageForm.length; i++) {
              if (this.dosageForm[i].dictLabel === text) {
                return this.dosageForm[i].dictValue;
              }
            }
          }
        })
      },
      drugClassifyFilter(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.drugClassify.length; i++) {
              if (this.drugClassify[i].dictValue === Number(text)) {
                return this.drugClassify[i].dictLabel;
              }
            }
          }
        })
      },
      drugClassifyFilters(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.drugClassify.length; i++) {
              if (this.drugClassify[i].dictLabel === text) {
                return this.drugClassify[i].dictValue;
              }
            }
          }
        })
      },
      retailFormFilter(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.retailForm.length; i++) {
              if (this.retailForm[i].dictValue === text) {
                return this.retailForm[i].dictLabel;
              }
            }
          }
        })
      },
      retailFormFilters(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.retailForm.length; i++) {
              if (this.retailForm[i].dictLabel === text) {
                return this.retailForm[i].dictValue;
              }
            }
          }
        })
      },
      medicalInsuranceFilter(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.medicalInsurance.length; i++) {
              if (this.medicalInsurance[i].dictValue === text) {
                return this.medicalInsurance[i].dictLabel;
              }
            }
          }
        })
      },
      medicalInsuranceFilters(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.medicalInsurance.length; i++) {
              if (this.medicalInsurance[i].dictLabel === text) {
                return this.medicalInsurance[i].dictValue;
              }
            }
          }
        })
      },
      typesOfMedicalFilter(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.typesOfMedical.length; i++) {
              if (this.typesOfMedical[i].dictValue === text) {
                return this.typesOfMedical[i].dictLabel;
              }
            }
          }
        })
      },
      typesOfMedicalFilters(text) {
        return ((text) => {
          if (text != null) {
            for (let i = 0; i < this.typesOfMedical.length; i++) {
              if (this.typesOfMedical[i].dictLabel === text) {
                return this.typesOfMedical[i].dictValue;
              }
            }
          }
        })
      },
    },
    filters: {
      statusFilter: function (text) {
        if (text === 'Disable') {
          return '已停用';
        } else if (text === 'Enable') {
          return '已启用';
        }
      }
    },
    methods: {
      handleExceed(files, fileList) {
        
      },
      handleChange(file, fileList) {
        // 当多余一个的时候替换文件
        if (fileList.length > 1) {
          fileList.splice(0, 1);
        }
      },
      handleAvatarSuccess(res, file) {
        this.drugImg = res.fileName
        this.dataForm.drugImg = res.fileName
      },
      getDictByType() {
        this.getDicts("drug_classify").then(response => {
          for (let i = 0; i < response.data.length; i++) {
            response.data[i].dictValue = Number(response.data[i].dictValue)
          }
          this.drugClassify = response.data;
        });
        this.getDicts("dosage").then(response => {
          this.dosageForm = response.data;
        });
        this.getDicts("retail_unit").then(response => {
          for (let i = 0; i < response.data.length; i++) {
            response.data[i].dictValue = Number(response.data[i].dictValue)
          }
          this.retailForm = response.data;
        });
        this.getDicts("is_medicare").then(response => {
          for (let i = 0; i < response.data.length; i++) {
            response.data[i].dictValue = Number(response.data[i].dictValue)
          }
          this.medicalInsurance = response.data;
        });
        this.getDicts("medicare_type").then(response => {
          for (let i = 0; i < response.data.length; i++) {
            response.data[i].dictValue = Number(response.data[i].dictValue)
          }
          this.typesOfMedical = response.data;
        });
      },
      treeType() {
        this.visibleTree = true;
      },
      handleXmxz(obj, node, data) {
        this.treeId=[];
        this.recursion(obj);
        this.getDrugList(this.treeId.join(","));
        this.names = obj
      },
      recursion(node){
        if(node.children!=null){
          for(let i = 0 ; i<node.children.length;i++){
            this.recursion(node.children[i])
          }
        }else if(node.children==null){
          this.treeId.push(node.id);
        }
      },
      handleClick(obj, node, data) {
        if (obj.children == null) {
          this.dataForm.typeId = obj.id;
        }
        this.dataForm.category = obj.name
      },
      // 筛查
      getDrugList(typeId) {
        let _this = this
        GetDrugAllByString({typeId, pageNum: this.currentPage, pageSize: this.pageSize}).then(res => {
          _this.dataList = res.rows
          _this.totalCount = res.total
        })
      },
      getDrugTypeList() {
        let _this = this
        GetDrugTypeList(this.params).then(res => {
          _this.tableData = res.data;
        });
      },
      saveDrugType(queryForm) {
        queryForm.typeId = this.names.id;
        GetDrugList(queryForm).then(res => {
            this.dataList = res.rows
            this.totalCount = res.total
          }
        )
      },
      cleanDrugType() {
        this.queryForm.name = ''
        this.queryForm.status = ''
      },
      // 分页
      handleSizeChange(val) {
        //当前显示多少条
        this.currentPage = 1;
        this.pageSize = val;
        this.getDrugList(this.names.id);
      },
      handleCurrentChange(val) {
        //当前页码
        this.treeId=[];
        this.currentPage = val;
        this.recursion(this.names);
        this.getDrugList(this.treeId.join(","));
      },
      editDictionary(row) {
        this.dialogVisible = true;
        let item = JSON.parse(JSON.stringify(row));
        console.log(item)
        // this.upload.fileList[0].name = item.name
        this.drugImg = item.drugImg
        item.medicareType = this.typesOfMedicalFilter(item.medicareType);
        item.isMedicare = this.medicalInsuranceFilter(item.isMedicare);
        item.retailUnit = this.retailFormFilter(item.retailUnit);
        item.drugType = this.drugClassifyFilter(item.drugType);
        this.dataForm = item;
      },
      cancel(){
        this.dialogVisible = false;
        this.getDrugList(this.names.id)
      },
      saveDrug(dataForm) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.dialogVisible = false;
            if (this.value1 == true) {
              dataForm.status = 'Enable'
            } else {
              dataForm.status = 'Disable'
            }
            if (typeof (dataForm.medicareType) == 'string') {
              dataForm.medicareType = this.typesOfMedicalFilters(dataForm.medicareType);
            }
            if (typeof (dataForm.isMedicare) == 'string') {
              dataForm.isMedicare = this.medicalInsuranceFilters(dataForm.isMedicare);
            }
            if (typeof (this.dataForm.retailUnit) == 'string') {
              this.dataForm.retailUnit = this.retailFormFilters(this.dataForm.retailUnit);
            }
            if (typeof (dataForm.drugType) == 'string') {
              dataForm.drugType = this.drugClassifyFilters(dataForm.drugType);
            }
            UpdateDrug(dataForm).then(res => {
              this.msgSuccess(res.msg)
              this.getDrugList(this.names.id)
            })
          }
        });
      },
      deleteDictionary(row) {
        let me = this;
        this.$confirm("确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          DeleteById({id: row.id}).then(function (res) {
            me.$message({
              type: "success",
              message: "删除成功!"
            });
            me.getDrugList(row.typeId);
          })
        })
      },
      treeRender(h, {node, data, store}) {
        return (
          <span class="tree-node">
          <span>
          <svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-close"
        v-show={!node.isLeaf && !node.expanded}></svg-icon>
        <svg-icon style="width: 14px;height: 14px;margin-right:5px" icon-class="file-open"
        v-show={!node.isLeaf && node.expanded}></svg-icon>
        <el-badge>
        <span>{node.label}</span>
        </el-badge>
        </span>
        <span v-show={node.isCurrent} style="margin-left: 20px;">
          </span>
          </span>
      )},
    }
  }
</script>

<style lang="scss" scoped>
.avatar {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 140px;
  }
  .category .el-input--medium{
    width: 135px!important;
  }
  .el-form-item label:after {
    content: "";
    display: inline-block;
    width: 100%;
  }

  .el-form-item__label {
    text-align: justify;
    height: 50px;
  }

  .el-form-item.is-required .el-form-item__label:before {
    content: none !important;
  }

  .no-data-class {
    font-size: 1500%;
  }

  .catalogPage {
    i {
      font-size: 36upx;
      color: #519eff;
    }

    span {
      font-size: 28upx;
    }

    .border-left {
      height: 500px;
      padding-left: 10px;
      border-left: 1px solid #dedede;
    }
  }

  .content {
    margin: -20px;
    height: calc(100% + 40px);
    display: flex;

    .aside {
      flex: 0 280px;
      position: relative;
      box-shadow: 1px 0px 4px rgba(0, 21, 41, 0.08);

      .tree-header {
        position: absolute;
        height: 50px;
        width: 100%;
        font-size: 36upx;
        line-height: 30px;
        font-family: PingFangSC-Regular;
        padding: 10px 22px;
        box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
      }

      .tree {
        margin-top: 55px;
        font-size: 28upx;

        >>> .tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28upx;
          padding-right: 8px;

          .el-button + .el-button {
            margin-left: 3px;
          }

        }
      }

    }

    .service-item {
      flex: 1;
    }

    .demo-form-inline {
      padding: 10px;
    }
  }

  .el-icon-folder {
    color: #519eff;
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px;
    box-shadow: 0px 2px 4px rgba(0, 21, 41, 0.08);

    .main-title {
      font-family: PingFangSC-Light;
      line-height: 20px;
      font-size: 32upx;
      display: inline-block;
      margin-right: 12px;
      padding-left: 10px;
      border-left: 4px solid #1890FF;
    }
  }

  .pagina {
    margin-top: 10px;
  }
</style>
